<template>
    <div id="orderDetails">
        <!-- 公共头部 -->
        <myHeader class="myHeader-bag" title="订单详情">
             <!-- 左侧按钮插槽 -->
            <template #left>
                <i class="back-icon" @click="backFn"></i>
            </template>
            <!-- 右侧按钮插槽 -->
            <template #right>
                <span class="more-icon"></span>
            </template>
        </myHeader>
        <!-- 等待发货提醒 -->
        <shipments></shipments>
        <!-- 收货人信息 -->
        <consignee></consignee>
        <!-- 订单列表 -->
        <orderList></orderList>
        <!-- 订单编号or练习客服or申请退款 -->
        <orderNumber></orderNumber>
    </div>
</template>

<script>
// 公共头部
import myHeader from '@/components/myHeader/myHeader'
// 等待发货
import shipments from './shipments'
// 收货人
import consignee from './consignee'
// 订单列表
import orderList from './orderList'
// 订单编号or练习客服or申请退款
import orderNumber from './orderNumber'
export default {
    components:{
        myHeader,
        shipments,
        consignee,
        orderList,
        orderNumber
    },
    methods: {
        // 返回上一页
        backFn(){
            this.$router.push('/orderList').catch(err => {})
        }
    },
}
</script>

<style lang="less" scoped>
#orderDetails{
    background-color: #f7f7f7;
    height: 100%;
    // 公共头部
    .myHeader-bag{
        background-color: #ffffff;
        // 返回图标
        .back-icon {
            display: block;
            background: url("../../../../static/images/shoppingCart/back-icon.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 21px;
        }
        .more-icon {
            display: block;
            background: url("../../../../static/images/shoppingCart/more-icon.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 21px;
        }
    }
}
</style>
